<template>
<div class='Tabmapmenu'>
  <div class='rlist'>
    <div class='txt listtitle'><p>底图切换</p></div>
    <el-menu
        :default-active="curtabval"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="rgba(0, 0, 0, 0.5)"
        text-color="#fff"
        active-text-color="#ffd04b"
        size="mini"
        >
        <template v-for="(item,index) in tabMenuList">
          <el-submenu :index="item.index" v-if="item.children" :key="index">
            <template slot="title">{{item.title}}</template>
            <el-menu-item v-for="(child,index) in item.children" :index="child.index" :key="index">{{child.title}}</el-menu-item>
          </el-submenu>
          <el-menu-item v-if="!item.children" :index="item.index" :year="item.year" :key="index">{{item.title}}</el-menu-item>
        </template>
    </el-menu>
  </div>

    <div class="rtime" v-if="isVisibleTimeSpots">

      <div class="txt timeselect"><p>时间选择</p></div>
      <div class="rtime-container">
        <div class="rtime-year" :class="'imp'+currentSpotsBorder">
          <!-- 最好不要给默认值 否则会引出很多问题（年份重置，传地图参数等） -->
            <span v-for="(item,index) in curyearlist" :class="activeYearIndex==index?'active':''"  @click="clickyear(item)">{{item.year}}</span>
            <p class="txtyear">年</p>
        </div>
        <div class="rtime-slider" v-if="isVisibleMonth">
            <TimeSlider :min="1" :max="12" :step=1 labels :values="[curmonth]" :timeColor="currentSpotsBorder" :sliderTag="pos"></TimeSlider>
        </div>
        <!-- <div class="rtime-month"><p>月</p></div> -->
      </div>
    </div>
</div>
</template>

<script>
import TimeSlider from '@/components/TimeSlider'
export default {
  components: {
    TimeSlider
  },
  props: ['pos'],
  data () {
    return {
      isVisibleMonth: false, // 月份时间轴
      currentSpotsBorder: 0, // 图斑页时间轴默认颜色
      tabMenuList: [
        {
          index: 'czkfbj',
          title: '行政边界',
          children: [
            { index: 'czkfbj_sj', title: '市界' },
            { index: 'czkfbj_qj', title: '区界' },
            { index: 'czkfbj_xzj', title: '乡镇界' },
            { index: 'czkfbj_cj', title: '村界' }
          ]
        },
        {
          index: 'sx',
          title: '三线',
          children: [
            { index: 'sx_cskfbj', title: '城市开发边界' },
            { index: 'sx_stbhhx', title: '生态保护红线' },
            { index: 'sx_yjjbntbhx', title: '永久基本农田保护线' }
            // { index: "sx_cxjhb", title: "城乡结合部" }
          ]
        },
        // {
        //   index: "xzyd",
        //   title: "现状用地",
        //   children: [{ index: "xzyd_xzyd", title: "现状用地" }]
        // },
        {
          index: 'ghyd',
          title: '规划用地',
          children: [
            { index: 'ghyd_sygh', title: '城市总体规划' },
            // { index: 'ghyd_sqgh', title: '市区总体规划' },
            { index: 'ghyd_tdlygh', title: '土地利用总体规划' }
            // { index: 'ghyd_sqztgh', title: '市区总体规划' }
          ]
        },
        {
          index: 'xzyd',
          title: '现状用地',
          children: [
            { index: 'xzyd_tdbgdc', title: '土地变更调查' }
          ]
        },
        {
          index: 'ygyx',
          title: '遥感影像',
          children: [{ index: 'ygyx_ygyx', title: '遥感影像' }]
        }
      ],
      preTabMenuList: [
        // 用于tab恢复默认值
        {
          index: 'czkfbj',
          title: '行政边界'
        },
        {
          index: 'sx',
          title: '三线'
        },
        // {
        //   index: "xzyd",
        //   title: "现状用地"
        // },
        {
          index: 'ghyd',
          title: '规划用地'
        },
        {
          index: 'xzyd',
          title: '现状用地'
        },
        {
          index: 'ygyx',
          title: '遥感影像'
        }
      ],
      // 映射关系
      mapingTabYear: {
        czkfbj_sj: [],
        czkfbj_qj: [],
        czkfbj_xzj: [],
        czkfbj_cj: [],
        sx_cskfbj: [],
        sx_stbhhx: [],
        sx_yjjbntbhx: [],
        ghyd_sygh: [{ id: 0, year: 2004 }],
        ghyd_sqgh: [{ id: 0, year: 2004 }],
        // ghyd_tdlygh: [{ id: 0, year: 2006 }, { id: 1, year: 2017 }],
        ghyd_tdlygh: [{ id: 0, year: 2017 }],
        // ghyd_sqztgh:[{ id: 0, year: 2004 }],
        ygyx_ygyx: [
          { id: 0, year: 2018 },
          { id: 1, year: 2019 },
          { id: 2, year: 2020 }
        ],
        xzyd_tdbgdc: [
          { id: 0, year: 2016 },
          { id: 1, year: 2017 },
          { id: 2, year: 2018 }
        ]
      }
    }
  },
  computed: {
    activeYearIndex () {
      return this.pos === 'left' ? this.$store.getters.activeYearIndexLeft : this.$store.getters.activeYearIndexRight
    },
    curyear () {
      return this.pos === 'left' ? this.$store.getters.curleftyear : this.$store.getters.currightyear
    },
    curmonth () {
      return this.pos === 'left' ? this.$store.getters.curleftmonth : this.$store.getters.currightmonth
    },
    // 当前的值
    curtabval () {
      return this.pos === 'left' ? this.$store.getters.curLeftTabVal : this.$store.getters.curRightTabVal
    },
    // 获取映射中的年份
    curyearlist () {
      return this.mapingTabYear[this.curtabval]
    },
    // 图斑需要的参数
    spotsParam () {
      return {
        label_enname: this.curtabval,
        year: this.curyear,
        month: this.curmonth
      }
    },
    curApiUrl () {
      return this.$store.getters.curApiUrl
    },
    // 时间选择整体控制
    isVisibleTimeSpots () {
      return this.pos === 'left' ? this.$store.getters.isVisibleTimeLeftSpots : this.$store.getters.isVisibleTimeRightSpots
    }
  },
  watch: {
    // 监测年的变化
    curyearlist (val) {
      // 判断时间轴的显现
      let flag = false
      if (this.pos === 'left') {
        if (val.length > 0) {
          flag = true
        } else {
          flag = false
        }
        this.$store.dispatch('changeVisibleLeftTime', flag)
      } else if (this.pos === 'right') {
        if (val.length > 0) {
          flag = true
        } else {
          flag = false
        }
        this.$store.dispatch('changeVisibleRightTime', flag)
      }
    },
    spotsParam: {
      handler (val) {
        val.label_enname =
          val.label_enname.split('_').length > 1
            ? val.label_enname.split('_')[1]
            : val.label_enname
        this.$axios
          .get(
            `${this.curApiUrl}/api/layerserver?params=${JSON.stringify(val)}`
          )
          .then(res => {
            if (this.pos === 'left') {
              this.$store.dispatch('changeLeftMapServerUrl', res.data)
            } else if (this.pos === 'right') {
              this.$store.dispatch('changeRightMapServerUrl', res.data)
            }
          })
          .catch(error => {
            console.log('请求数据错误')
          })
      },
      deep: true
    }
  },
  methods: {
    // 月份的控制方法
    isShowMonth (tabname) {
      const tabControl = [
        'ygyx_ygyx'
        // 'xzyd_tdbgdc',
        // 'ghyd_sqztgh',
        // 'ghyd_tdlygh',
        // 'ghyd_sygh',
        // 'ghyd_sqgh',
        // 'ghyd'
      ]
      // 控制时间轴的显示隐藏
      if (tabControl.indexOf(tabname) > -1) {
        this.isVisibleMonth = true
      } else {
        this.isVisibleMonth = false
      }
    },
    handleSelect (index, list) {
      // 年份默认状态
      if (this.pos === 'left') {
        this.$store.dispatch('changeactiveyearindexleft', 0)
      } else {
        this.$store.dispatch('changeactiveyearindexright', 0)
      }

      // 点击选中的值
      let indexname = index

      // tab点哪个变哪个重置
      this.tabMenuList.map(item => {
        if (item.children) {
          item.children.filter(ele => {
            if (indexname === ele.index) {
              let titlestr = ele.index.split('_')[0]
              this.tabMenuList.map((item, index) => {
                if (item.index === titlestr) {
                  item.title = ele.title
                } else {
                  // 解决其它非选中项恢复默认值
                  item.index = this.preTabMenuList[index].index
                  item.title = this.preTabMenuList[index].title
                }
              })
            }
          })
        }
      })

      // 改变左右的值
      switch (this.pos) {
        case 'left':
          this.$store.dispatch('changetableft', indexname)
          this.isShowMonth(indexname)
          // 每次切换时 给有年份的赋默认值
          switch (index) {
            case 'czkfbj_sj':
            case 'czkfbj_qj':
            case 'czkfbj_xzj':
            case 'czkfbj_cj':
            case 'sx_cskfbj':
            case 'sx_stbhhx':
            case 'sx_yjjbntbhx':
              this.$store.dispatch('changeleftyear', '')
              this.$store.dispatch('changeleftmonth', '')
              break
            case 'ghyd_sygh':
            case 'ghyd_sqgh':
            // case 'ghyd_sqztgh':
              this.$store.dispatch('changeleftyear', '2004')
              this.$store.dispatch('changeleftmonth', '')
              break
            case 'ghyd_tdlygh':
              this.$store.dispatch('changeleftyear', '2017')
              this.$store.dispatch('changeleftmonth', '')
              break
            case 'ygyx':
            case 'ygyx_ygyx':
              this.$store.dispatch('changeleftyear', '2019')
              this.$store.dispatch('changeleftmonth', '12')
              this.$store.dispatch('changeactiveyearindexleft', 1)
              break
            case 'xzyd':
            case 'xzyd_tdbgdc':
              this.$store.dispatch('changeleftyear', '2016')
              this.$store.dispatch('changeleftmonth', '')
              // case 'bgdc':
              // case 'bgdc_bgdc':
              //   this.$store.dispatch('changeleftyear', '2016')
              //   this.$store.dispatch('changeleftmonth', '')
              break
            default:
              break
          }
          break
        case 'right':
          this.$store.dispatch('changetabright', indexname)
          this.isShowMonth(indexname)
          // 每次切换时 给有年份的赋默认值
          switch (index) {
            case 'czkfbj_sj':
            case 'czkfbj_qj':
            case 'czkfbj_xzj':
            case 'czkfbj_cj':
            case 'sx_cskfbj':
            case 'sx_stbhhx':
            case 'sx_yjjbntbhx':
            // case "sx_cxjhb":
              this.$store.dispatch('changerightyear', '')
              this.$store.dispatch('changerightmonth', '')
              break
            case 'xzyd':
            case 'xzyd_xzyd':
              this.$store.dispatch('changerightyear', '2014')
              this.$store.dispatch('changerightmonth', '')
              break
            case 'ghyd_sygh':
            case 'ghyd_sqgh':
            // case 'ghyd_sqztgh':
              this.$store.dispatch('changerightyear', '2004')
              this.$store.dispatch('changerightmonth', '')
              break
            case 'ghyd_tdlygh':
              this.$store.dispatch('changerightyear', '2006')
              this.$store.dispatch('changerightmonth', '')
              break
            case 'ygyx':
            case 'ygyx_ygyx':
              this.$store.dispatch('changerightyear', '2018')
              this.$store.dispatch('changerightmonth', '12')
              // this.activeYearIndex = 2;
              // this.$store.dispatch('changeactiveyearindex',2)
              this.$store.dispatch('changeactiveyearindexright', 0)
              break
            case 'xzyd':
            case 'xzyd_tdbgdc':
              this.$store.dispatch('changeleftyear', '2016')
              this.$store.dispatch('changeleftmonth', '')
            case 'bgdc':
            case 'bgdc_bgdc':
              this.$store.dispatch('changerightyear', '2016')
              this.$store.dispatch('changerightmonth', '')
              break
            default:
              break
          }
          break
        default:
          break
      }
    },
    clickyear (item) {
      switch (this.pos) {
        case 'left':
          this.$store.dispatch('changeleftyear', item.year)
          this.$store.dispatch('changeactiveyearindexleft', item.id)
          break
        case 'right':
          this.$store.dispatch('changerightyear', item.year)
          this.$store.dispatch('changeactiveyearindexright', item.id)
          break
        default:
      }
    }
  },
  mounted () {
    // 默认加载时遥感影像对应月份的控制
    this.isShowMonth(this.$store.getters.curLeftTabVal)
    this.isShowMonth(this.$store.getters.curRightTabVal)
  }
}
</script>
<style lang="stylus">
.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 40px !important
  line-height: 40px !important
  font-size: 12px
  padding: 0px 7px
}

.map-wrap .map-left .map-left-menu ul {
  // background rgba(0,0,0,0.4)!important
}

.map-wrap .map-left .map-left-menu ul li {
  // background rgba(0, 0, 0, 0.5)
}

.el-menu--horizontal>.el-submenu:focus .el-submenu__title, .el-menu--horizontal>.el-submenu:hover .el-submenu__title {
  height: 40px !important
  line-height: 40px !important
}

.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  // background rgba(0, 0, 0, 0.5)
}

.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
  display: none
}

.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
  font-size: 12px
}

.Tabmapmenu {
  .rlist {
    display: flex
    background-color: #000

    .el-menu-demo {
      height: 40px !important
      border-bottom: solid 0px !important
    }
  }

  .rtime {
    display: flex
    background-color: rgba(0, 0, 0, 0.5)

    .rtime-container {
      width: 100%
      line-height: 20px
      padding: 5px 0px

      .rtime-year {
        margin-bottom: 5px
        margin-right: 12px
        // display flex
        // justify-content space-between
        color: #aaa
        font-size: 12px

        span {
          padding: 0 7px
          cursor: pointer
        }

        .txtyear {
          display: inline-block
        }
      }

      .rtime-slider {
        // margin 10px 0
        .slider-pips {
          width: 93%

          .slider-pips__pips {
            > li {
              height: 5px

              span {
                top: 0%
                padding: 0px
              }
            }
          }
        }
      }

      .rtime-month {
        position: absolute
        right: 9px
        top: 54px
        line-height: 80px
        font-size: 12px
        color: #aaa
      }
    }
  }

  // 文本公共样式
  .txt {
    font-size: 12px
    margin: 5px 0 5px 0px
    font-weight: bold
    display: flex
    flex-direction: column
    justify-content: center

    p {
      width: 30px
      text-align: center
      line-height: 16px
    }
  }
}
</style>
